<template>
	<kui-page :custom-header="false">
		<template v-slot:body>
			<view class="">
				<view class="kui-mt-3">
					<kui-text font-size="18px" color="#666">全局暗黑模式</kui-text>
					<kui-config-provider mode="dark">
						<kui-container class="kui-mt-3">
							<kui-space :gap="[40,20]" class="kui-p-3">
								<kui-button type="primary">普通按钮</kui-button>
								<kui-button type="info">信息按钮</kui-button>
								<kui-button>默认按钮</kui-button>
								<kui-button type="success">成功按钮</kui-button>
								<kui-button type="warning">警告按钮</kui-button>
								<kui-button type="danger">危险按钮</kui-button>
							</kui-space>
						</kui-container>
					</kui-config-provider>
				</view>
				<view class="kui-mt-3">
					<view :style="rootStyle"></view>
				</view>
			</view>
		</template>
	</kui-page>
</template>

<script lang="ts">
	import {
		CSSProperties,
		reactive,
		computed
	} from 'vue';
	
	export default {
		setup() {
			const rootStyle = computed(() => {
				const style: CSSProperties = reactive({});
				style.width = '200rpx';
				style.height = '200rpx';
				style.backgroundColor = 'red';
				
				return style;
			});
			
			return {
				rootStyle
			}
		}
	}
</script>

<style>

</style>
